import { useState } from 'react';
import logo from './assets/logo.svg';
import './App.css';
import useClass from './hooks/use-class';
import useNum from './hooks/use-num';
import useNumValid from './hooks/use-num-valid';
// 默认div是蓝色背景，图片是不激活的状态
// 点击图片，变成激活的状态(图片加个框)，
// 点击图片外，图片变成非激活状态
const App = () => {
    const { handleImg, handleBox, imgClass, boxClass } = useClass();
    const { num, increment, decrement } = useNum(10);
    const { value, onChange, err } = useNumValid();
    return (
        <div
            onClick={handleBox}
            className={boxClass}
        >
            <h2>{num}</h2>
            <button onClick={increment}>点击+1</button>
            <button onClick={decrement}>点击-1</button>
            <img
                className={imgClass}
                onClick={handleImg}
                style={{
                    width: 200,
                    // border: isActive ? '2px solid #f00': 'none' 
                }}
                src={logo}
            />
            {/* 验证正整数的输入框 */}
            <input onChange={onChange} value={value} type="text" />
            <p>{err}</p>
        </div>
    );
}

export default App;
